var shape = Base.extend({
	constructor: function(xCord,yCord){
	this.x = xCord;
	this.y = yCord;
	this.minX = 10000;
	this.maxX = -10000;
	this.minY = 10000;
	this.maxY = -10000;
	this.originalX = xCord;
	this.originalY = yCord;
	this.selected = false;
	},
	draw:function(){
		console.log("draw");
	},
	checkCollision:function(mouseX,mouseY){
		console.log("select");
	},
	isSelected:function(){
		return false;
	},
	translate: function(moveX,moveY){
		

	},
	deSelect: function(){
		this.selected=false;
	},
	isSelected: function(){
		return this.selected;
	},
	getMaxY:function(){
		return this.maxY;
	},
	getMaxX:function(){
		return this.maxX;
	},
	getMinY:function(){
		return this.minY;
	},
	getMinX:function(){
		return this.minX;
	},
	setPosition:function()
	{
		this.originalX = this.x;
		this.originalY = this.y;
		this.originalX2 = this.x2;
		this.originalY2 = this.y2;
		this.originalMinX = this.minX;
		this.originalMaxX = this.maxX;
		this.originalMinY = this.minY;
		this.originalMaxY = this.maxY;
	},
	select: function()
	{
		console.log("select");
		this.selected = true;
	},
	
	x: 0,
	y: 0,
	
});
var template = shape.extend({
	constructor:function(){
		this.minX = 10000;
		this.maxX = -10000;
		this.minY = 10000;
		this.maxY = -10000;
		this.templateName = "undefined";
	},
	
	templateShapes:new Array(),
	addShape: function(s){

		this.templateShapes.push(s);
		if(s.getMinX() < this.minX){
			this.minX = s.getMinX();
		}
		if(s.getMaxX() > this.maxX){
			this.maxX = s.getMaxX();
		}
		if(s.getMinY() < this.minY){
			this.minY = s.getMinY();
		}
		if(s.getMaxY() > this.maxY){
			this.maxY = s.getMaxY();
		}
		
	},
	getName: function(){
		return this.templateName;
	},
	setName: function(templateName){
		this.templateName = templateName;
	},
	draw: function(){
		for(var i = 0; i<this.templateShapes.length;i++){
			//s.draw();
			this.templateShapes[i].draw();
			
		}
	},
	checkCollision:function(mouseX,mouseY){
		for(var i = 0; i<this.templateShapes.length;i++){
			if(this.templateShapes[i].checkCollision(mouseX,mouseY)){
				return true;
			}
		}

	},

	translate: function(moveX,moveY){
		for(var i = 0; i<this.templateShapes.length;i++){
			this.templateShapes[i].translate(moveX,moveY);
		}

	},
	setPosition:function()
	{
		this.minX = 10000;
		this.maxX = -10000;
		this.minY = 10000;
		this.maxY = -10000;

		for(var i = 0; i<this.templateShapes.length;i++){
			this.templateShapes[i].setPosition();
			if(this.templateShapes[i].getMinX() < this.minX){
				this.minX =this.templateShapes[i].getMinX();
			}
			if(this.templateShapes[i].getMaxX() > this.maxX){
				this.maxX = this.templateShapes[i].getMaxX();
			}
			if(this.templateShapes[i].getMinY() < this.minY){
				this.minY = this.templateShapes[i].getMinY();
			}
			if(this.templateShapes[i].getMaxY() > this.maxY){
				this.maxY = this.templateShapes[i].getMaxY();
			}
			
		}

	},
	deSelect: function(){
		this.selected=false;
	},
	isSelected: function(){
		return this.selected;
	},
	getDescription:function()
	{
		var str = "4:"+'X';
		for(var i = 0; i<this.templateShapes.length;i++){
			str+=this.templateShapes[i].getDescription()+"X";
		}
		return str;
	},


});
var rectangle = shape.extend({
	constructor: function(ctx,xCord,yCord,width,height,color){
	this.context = ctx;
	this.x = xCord;
	this.y = yCord;
	this.originalX = xCord;
	this.originalY = yCord;
	this.width = width;
	this.height = height;
	this.color = color;
	},
	
	x:0,
	y:0,
	width:0,
	height:0,
	
	draw: function(){
		this.context.beginPath();
		this.context.rect(this.x,this.y,this.width,this.height);
		this.context.fillStyle = this.color;
		this.context.strokeStyle=this.color;
		if(true){
			this.context.fill();
		}
		this.context.stroke();
	},
	
	reDraw: function(newWidth,newHeight){
		return (new rectangle(this.context,this.x,this.y,newWidth-this.x,newHeight-this.y,this.color));
	},
	translate: function(moveX,moveY){
		this.x = moveX+this.originalX;
		this.y = moveY+this.originalY;
	},
	
	checkCollision: function(mouseX,mouseY){
		if((this.x<mouseX && this.x+this.width>mouseX) &&(this.y<mouseY && this.y+this.height>mouseY)){
			return true;
		}
	},

	
});

var circle = shape.extend({

	constructor: function(ctx,x,y,rad,color){
		this.color = color;
		this.context = ctx;
		this.x = x;
		this.y = y;
		this.originalX = x;
		this.originalY = y;
		this.rad = rad;
		this.minY = this.y-this.rad;
		this.minX = this.x-this.rad;
		this.maxY = this.y+this.rad;
		this.maxX = this.x+this.rad;

	},
	x:0,
	y:0,
	rad:0,
	
	
	draw: function(){
		
		this.context.beginPath();
		this.context.arc(this.x,this.y,this.rad,0,2 * Math.PI,false);
		this.context.fillStyle = this.color;
		this.context.strokeStyle=this.color;
		if(true){
			this.context.fill();
		}
		this.context.stroke();
		<!--console.log(this.x);-->
	},
	
	reDraw: function(newX,newY){
		var newRad = Math.round(Math.sqrt(Math.abs((Math.pow(newX-this.x,2))+(Math.pow(newY-this.y,2)))));
		return (new circle(this.context,this.x,this.y,newRad,this.color));
	},
	translate: function(moveX,moveY){
		this.x = moveX+this.originalX;
		this.y = moveY+this.originalY;
		this.minY = this.y-this.rad;
		this.minX = this.x-this.rad;
		this.maxY = this.y+this.rad;
		this.maxX = this.x+this.rad;

		
	},
	checkCollision: function(mouseX,mouseY){
		if((this.minX<mouseX && this.maxX>mouseX) &&(this.minY<mouseY && this.maxY>mouseY)){
			return true;
		}
	},
	
	

});

var line = shape.extend({
	constructor: function(ctx,x,y,endX,endY,color){
		this.color = color;
		this.context = ctx;
		this.x = x;
		this.y = y;
		this.x2 = endX;
		this.y2 = endY;
		this.originalX = x;
		this.originalY = y;
		this.originalX2 = endX;
		this.originalY2 = endY;
		if(this.x < this.x2){
			this.minX = this.x;
			this.maxX = this.x2;
		}
		else{
			this.minX = this.x2;
			this.maxX = this.x;
		}
		if(this.y < this.y2){
			this.minY = this.y;
			this.maxY = this.y2;
		}
		else{
			this.minY = this.y2;
			this.maxY = this.y;
		}
		this.originalMinX = this.minX;
		this.originalMaxX = this.maxX;
		this.originalMinY = this.minY;
		this.originalMaxY = this.maxY;
	},
	/*x:0,
	y:0,
	x2:0,
	y2:0,*/
	
	draw: function(){
		this.context.beginPath();
		this.context.strokeStyle = this.color;
		this.context.moveTo(this.x,this.y);
		this.context.lineTo(this.x2,this.y2);
		this.context.stroke();
	},
	reDraw: function(newX,newY){
		return (new line(this.context,this.x,this.y,newX,newY,this.color));
	},
	
	translate: function(moveX,moveY){
		this.x = moveX+this.originalX;
		this.y = moveY+this.originalY;
		this.x2 = moveX+this.originalX2;
		this.y2 = moveY+this.originalY2;
		this.minY = this.originalMinY+moveY;
		this.minX = this.originalMinX+moveX;
		this.maxY = this.originalMaxY+moveY;
		this.maxX = this.originalMaxX+moveX;
	},
	
	checkCollision: function(mouseX,mouseY){
		if((this.minX<mouseX && this.maxX>mouseX) &&(this.minY<mouseY && this.maxY>mouseY)){
			return true;
		}
	},
});

var freehand = shape.extend({
	constructor: function(ctx,x,y,color){
		this.color = color;
		this.context = ctx;
		this.points = [];
		this.points[0] = new shape(x,y);
		this.minX = x;
		this.maxX = x;
		this.minY = y;
		this.maxY = y;
		this.originalMinX = this.minX;
		this.originalMaxX = this.maxX;
		this.originalMinY = this.minY;
		this.originalMaxY = this.maxY;
		this.originalP = [];
		this.originalP[0] = new shape(x,y);
	},
	
	add: function(x,y){
		this.points[this.points.length] = new shape(x,y);
		this.originalP[this.originalP.length] = new shape(x,y);
		if(x<this.minX){
			this.minX = x;
		}
		if(x>this.maxX){
			this.maxX = x;
		}
		if(y<this.minY){
			this.minY = y;
		}
		if(y>this.maxY){
			this.maxY = y;
		}
		this.originalMinX = this.minX;
		this.originalMaxX = this.maxX;
		this.originalMinY = this.minY;
		this.originalMaxY = this.maxY;
		console.log("adding: x=" + x +" and y=" + y);
	},
	
	draw: function(){
		console.log("drawing pen");
		if(this.points.length > 1){
			this.context.beginPath();
			this.context.strokeStyle=this.color;
			for(var i = 0; i<(this.points.length-1);i++){
				this.context.moveTo(this.points[i].x,this.points[i].y);
				this.context.lineTo(this.points[i+1].x,this.points[i+1].y);
			}
			this.context.closePath();
			this.context.stroke();
		}
	},
	getDescription: function(){
		var str = "3"
		for(var i = 0; i<this.points.length;i++){
			str+=":"+this.points[i].x+":"+this.points[i].y;
		}
		return str;
	},
	
	reDraw: function(x,y){
	},
	
	translate: function(moveX,moveY){
		for(var i = 0; i<this.points.length;i++){
			this.points[i].x = moveX + this.originalP[i].x;
			this.points[i].y = moveY + this.originalP[i].y;
		}
		this.minY = this.originalMinY+moveY;
		this.minX = this.originalMinX+moveX;
		this.maxY = this.originalMaxY+moveY;
		this.maxX = this.originalMaxX+moveX;
console.log(this.minX+","+this.minY+" || "+this.originalMinX+","+this.originalMinY);
console.log(this.maxX+","+this.maxY+" || "+this.originalMaxX+","+this.originalMaxY);
	},
	
	checkCollision: function(mouseX,mouseY){
		if((this.minX<mouseX && this.maxX>mouseX) &&(this.minY<mouseY && this.maxY>mouseY)){
			return true;
		}
	},
	
	setPosition:function()
	{
		this.originalX = this.x;
		this.originalY = this.y;
		this.originalX2 = this.x2;
		this.originalY2 = this.y2;
		this.originalMinX = this.minX;
		this.originalMaxX = this.maxX;
		this.originalMinY = this.minY;
		this.originalMaxY = this.maxY;
		for(var i=0;i<this.points.length;i++){
			this.originalP[i] = jQuery.extend(true, {}, this.points[i]);
		}
	},
});

var text = shape.extend({
	constructor: function(ctx,input,x,y,color){
		this.color = color;
		this.context = ctx;
		this.textInput = input;
		this.x = x;
		this.y = y;
		this.originalX = x;
		this.originalY = y;
		this.minX = x-20;
		this.maxX = x+30*this.textInput.length;
		this.minY = y-20;
		this.maxY = y+100;
	},
	
	
	draw: function(){
		
		console.log(this.textInput + " x = " + this.x + " y = " + this.y);
		this.context.font="30px Arial";
		this.context.strokeStyle=this.color;
		this.context.fillstyle=this.color;
		this.context.fillText(this.textInput,this.x,this.y);
	},
	
	reDraw: function(x,y){	
		return (new text(this.context,this.textInput,x,y,this.color));
	},
	
	translate: function(moveX,moveY){
		this.x = moveX+this.originalX;
		this.y = moveY+this.originalY;
	},
	
	checkCollision: function(mouseX,mouseY){
		if((this.minX<mouseX && this.maxX>mouseX) &&(this.minY<mouseY && this.maxY>mouseY)){
			console.log("U got it");
			return true;
		}
	},
	
	setPosition:function()
	{
		this.minX = this.x-20;
		this.maxX = this.x+30*this.textInput.length;
		this.minY = this.y-20;
		this.maxY = this.y+100;
		this.originalX = this.x;
		this.originalY = this.y;
	},
});
	

